<template>
    <view class="content-area">
        <view class="container">
            <!-- 语言选择区域 -->
            <view class="language-selector">
                <view class="source-lang">
                    <picker :value="sourceLangIndex" :range="languages" @change="changeSourceLang">
                        <view class="picker">
                            <text>{{ languages[sourceLangIndex] }}</text>
                            <text class="arrow">▼</text>
                        </view>
                    </picker>
                </view>
                <view class="switch-btn" @tap="switchLanguages">
                    <text class="iconfont">⇄</text>
                </view>
                <view class="target-lang">
                    <picker :value="targetLangIndex" :range="languages" @change="changeTargetLang">
                        <view class="picker">
                            <text>{{ languages[targetLangIndex] }}</text>
                            <text class="arrow">▼</text>
                        </view>
                    </picker>
                </view>
            </view>

            <!-- 语音输入区域 -->
            <view class="voice-area">
                <view class="voice-result">
                    <text>{{ voiceText || '等待语音输入...' }}</text>
                </view>
                <view class="voice-btn" :class="{'recording': isRecording}" @tap="toggleRecording">
                    <text class="iconfont">{{ isRecording ? '■' : '🎤' }}</text>
                </view>
            </view>

            <!-- 翻译结果区域 -->
            <view class="result-area" v-if="translatedText">
                <view class="result-text">
                    <text>{{ translatedText }}</text>
                </view>
                <view class="action-buttons">
                    <button class="action-btn" @tap="playTranslation">
                        <text class="iconfont">🔊</text>
                    </button>
                    <button class="action-btn" @tap="copyTranslation">
                        <text class="iconfont">📋</text>
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            languages: ['中文', '英语', '日语', '韩语', '法语', '德语', '西班牙语', '俄语'],
            sourceLangIndex: 0,
            targetLangIndex: 1,
            isRecording: false,
            voiceText: '',
            translatedText: '',
            // 语言代码映射
            langCodes: {
                '中文': 'zh',
                '英语': 'en',
                '日语': 'ja',
                '韩语': 'ko',
                '法语': 'fr',
                '德语': 'de',
                '西班牙语': 'es',
                '俄语': 'ru'
            }
        }
    },
    methods: {
        changeSourceLang(e) {
            this.sourceLangIndex = e.detail.value;
        },
        changeTargetLang(e) {
            this.targetLangIndex = e.detail.value;
        },
        switchLanguages() {
            const temp = this.sourceLangIndex;
            this.sourceLangIndex = this.targetLangIndex;
            this.targetLangIndex = temp;
        },
        toggleRecording() {
            this.isRecording = !this.isRecording;
            if (this.isRecording) {
                this.startRecording();
            } else {
                this.stopRecording();
            }
        },
        startRecording() {
            // 模拟开始录音
            uni.showToast({
                title: '开始录音',
                icon: 'none'
            });
            // 实际项目中这里需要调用录音API
        },
        stopRecording() {
            // 模拟停止录音并获取结果
            uni.showToast({
                title: '停止录音',
                icon: 'none'
            });
            
            // 模拟语音识别结果
            setTimeout(() => {
                this.voiceText = '这是一段示例语音文本';
                this.translateText();
            }, 1000);
        },
        translateText() {
            // 模拟翻译过程
            uni.showLoading({
                title: '翻译中...'
            });
            
            setTimeout(() => {
                uni.hideLoading();
                this.translatedText = 'This is a sample voice text';
            }, 1000);
        },
        playTranslation() {
            uni.showToast({
                title: '播放翻译',
                icon: 'none'
            });
        },
        copyTranslation() {
            uni.setClipboardData({
                data: this.translatedText,
                success: () => {
                    uni.showToast({
                        title: '已复制',
                        icon: 'success'
                    });
                }
            });
        }
    }
}
</script>

<style>
.content-area {
    min-height: 100vh;
    background-color: #f8f9fa;
}

.container {
    padding: 20rpx;
}

.language-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
}

.source-lang,
.target-lang {
    flex: 1;
}

.picker {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow {
    font-size: 24rpx;
    margin-left: 10rpx;
    color: #666;
}

.switch-btn {
    padding: 0 30rpx;
    font-size: 40rpx;
    color: #0d6efd;
}

.voice-area {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.voice-result {
    min-height: 200rpx;
    padding: 20rpx;
    border: 2rpx solid #eee;
    border-radius: 8rpx;
    margin-bottom: 30rpx;
}

.voice-btn {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    background-color: #0d6efd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 48rpx;
}

.voice-btn.recording {
    background-color: #dc3545;
}

.result-area {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
}

.result-text {
    min-height: 100rpx;
    padding: 20rpx;
    border: 2rpx solid #eee;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
}

.action-btn {
    padding: 10rpx 30rpx;
    font-size: 36rpx;
    background-color: #f8f9fa;
    border: none;
}
</style> 